<template>
  <div>
    <div class="topbar">
      <div class="topbar_left">购物车</div>
      <div class="topbar_right">完成</div>
    </div>

    <ul class="cart_list">
      <li class="shop_list" v-for="(item, index) in cartlist" :key="index">
        <div class="shop_name">
          <van-checkbox
            v-model="item.spcheck"
            @click="selectshop(index)"
          ></van-checkbox>
          <span>{{ item.shopname }} <i class="span_arrow">></i></span>
        </div>
        <div
          class="shop_goods"
          v-for="(citem, cindex) in item.goodlist"
          :key="cindex"
        >
          <van-checkbox
            v-model="citem.gdcheck"
            @click="selectgood(index)"
          ></van-checkbox>
          <div class="info">
            <img width="60" height="60" :src="citem.imgurl" />
            <div class="info_msg">
              <div class="title">{{ citem.goodname }}</div>
              <div class="desc">{{ citem.gooddesc }}</div>
              <div class="price_num">
                <span class="price">￥{{ citem.price }}</span>
                <van-stepper
                  v-model="citem.num"
                  theme="round"
                  button-size="22"
                  disable-input
                  @change="countprice"
                />
              </div>
            </div>
          </div>
          <van-icon
            name="delete"
            color="#1989fa"
            @click="delgood(index, cindex)"
          />
        </div>
      </li>
    </ul>

    <van-submit-bar :price="totalprice" button-text="提交订单">
      <van-checkbox v-model="allchecked" @click="selectall">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      allchecked: false,
      cartlist: [],
    };
  },
  computed: {
    totalprice() {
      let count = 0;
      var cartlist = this.cartlist;
      for (let i in cartlist) {
        for (let j in cartlist[i].goodlist) {
          if (cartlist[i].goodlist[j].gdcheck == true) {
            count += parseFloat(
              cartlist[i].goodlist[j].num * cartlist[i].goodlist[j].price
            );
          }
        }
      }
      return count * 100;
    },
  },
  methods: {
    getcartlist() {
      let _this = this;
      //axios请求的本地json文件要放最外层的文件夹中
      axios
        .get("http://localhost:8081/static/cartlist.json")
        .then((response) => {
          this.cartlist = response.data.data;
          console.log(_this.cartlist);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    selectshop(index) {
      //店铺全选/全不选

      var cartlist = this.cartlist;
      var goodlist = cartlist[index].goodlist;

      if (cartlist[index].spcheck == true) {
        cartlist[index].spcheck = true;
        for (let i in goodlist) {
          goodlist[i].gdcheck = true;
        }
      } else {
        cartlist[index].spcheck = false;
        this.allchecked = false;
        for (let i in goodlist) {
          goodlist[i].gdcheck = false;
        }
      }
      this.selectfull();
    },
    selectgood(index) {
      //对选择商品操作，当店铺中有商品取消选择，店铺不全选，当商品全部选择，店铺全选
      var cartlist = this.cartlist;
      var goodlist = cartlist[index].goodlist;

      var goodis = goodlist.map((item) => item.gdcheck).indexOf(false);
      if (goodis > -1) {
        //当前店铺有商品未选
        cartlist[index].spcheck = false; //店铺不能全选
      } else {
        cartlist[index].spcheck = true;
      }
      this.selectfull();
    },
    selectall() {
      //全选或全不选
      var cartlist = this.cartlist;
      for (let i = 0; i < cartlist.length; i++) {
        var goodlist = cartlist[i].goodlist;
        for (let j = 0; j < goodlist.length; j++) {
          if (this.allchecked == true) {
            cartlist[i].spcheck = true;
            goodlist[j].gdcheck = true;
          } else {
            cartlist[i].spcheck = false;
            goodlist[j].gdcheck = false;
          }
        }
      }
    },
    selectfull() {
      //在操作selectshop和selectgood时对selectall功能的补充
      //如果店铺中spcheck全部为true，则allchecked也为true
      //在点击店铺check和商品check时，全选时全选check不为true的补充
      var cartis = this.cartlist.map((item) => item.spcheck).indexOf(false);
      if (cartis == -1) {
        this.allchecked = true;
      } else {
        this.allchecked = false;
      }
    },
    countprice() {
      //计算价格
      let count = 0;
      var cartlist = this.cartlist;
      for (let i in cartlist) {
        for (let j in cartlist[i].goodlist) {
          if (cartlist[i].goodlist[j].gdcheck == true) {
            count += parseFloat(
              cartlist[i].goodlist[j].num * cartlist[i].goodlist[j].price
            );
          }
        }
      }
      this.totalprice = count * 100;
    },
    delgood(index, cindex) {
      var goodlist = this.cartlist[index].goodlist;

      goodlist.splice(cindex, 1);
      if (goodlist.length == 0) {
        this.cartlist.splice(index, 1);
      }
    },
  },
  created() {
    this.getcartlist();
  },
  mounted() {},
};
</script>

<style scoped>
.topbar {
  padding: 10px 10px 20px;
  background: #fafafa;
  width: 100%;
  overflow: hidden;
  /* position: fixed;top: 0;left: 0;z-index: 999900; */
}
.topbar_left {
  float: left;
  font-size: 20px;
  font-weight: bold;
}
.topbar_right {
  float: right;
}
.cart_list {
  width: 100%;
  height: calc(100vh - 150px);
  overflow-y: scroll;
  padding-bottom: 20px;
}
.van-card {
  margin-top: 0 !important;
}
.shop_list {
  margin-bottom: 5px;
}
.shop_name {
  background: #fafafa;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.shop_name .van-checkbox {
  float: left;
  margin-right: 10px;
}
.span_arrow {
  color: silver;
}
.shop_goods {
  height: 90px;
  background: #fafafa;
  display: flex;
  align-items: center;
}
.shop_goods .van-checkbox,
.van-icon-delete {
  width: 10%;
}
.info {
  width: 80%;
  display: flex;
}
.van-icon-delete {
  text-align: center;
  vertical-align: middle;
  display: block;
}
.shop_goods .van-checkbox {
  padding-left: 10px;
}
.info_msg {
  width: 100%;
}
.info img {
  display: block;
  padding: 5px;
  vertical-align: middle;
}
.info_msg .desc {
  font-size: 12px;
  color: #999;
}
.info_msg .price_num {
  overflow: hidden;
  margin-top: 5px;
}
.price_num .price {
  color: red;
  float: left;
  font-size: 18px;
  font-family: Avenir-Heavy, Arial, sans-serif;
}

.van-submit-bar {
  margin-bottom: 50px;
}
</style>